<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i>后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys-admin/serve/banner' }">轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{$router.currentRoute.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="简介" prop="title">
        <el-input v-model="ruleForm.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="alt">
        <el-input v-model="ruleForm.alt" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="排序序号" prop="sort">
        <el-input v-model="ruleForm.sort" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="isDisplay">
        <el-switch
            v-model="ruleForm.isDisplay"
            active-color="#13ce66"
            inactive-color="#999"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示">
        </el-switch>
      </el-form-item>
      <el-form-item label="轮播图类别" prop="typeId">
        <el-select v-model="ruleForm.typeId" placeholder="请选择">
          <el-option
              v-for="item in typeListOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="轮播图" prop="url">
        <div class="picture-list">
          <el-upload
              name="imageFile"
              class="picture-uploader"
              :action="uploadBanner"
              :show-file-list="false"
              :on-success="handleUploadSuccess">
            <i class="el-icon-upload picture-uploader-icon"></i>
            <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
            <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
          </el-upload>
          <div class="picture-item" v-show="ruleForm.url != ''">
            <el-image class="image"
                      :src="ruleForm.url" fit="cover"></el-image>
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="warning" @click="$router.push('/sys-admin/serve/banner')">返回轮播图列表</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import global from '../../../Global'
let preBannerUrl = global.preBanners;
let preResourceUrl = global.preResources ;

export default {
  data() {
    return {
      uploadBanner: preResourceUrl+'/upload/image/banner',
      typeListOptions: [{id:1, name:'往期回顾'}, {id:2, name:'名模佳丽'}],
      ruleForm: {
        url: '',
        title: '',
        typeId: '',
        alt: '',
        sort: '10',
        isDisplay: 1
      },
      rules: {
        url: [
          { required: true, message: '上传失败', trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '请选择轮播图类别', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序序号', trigger: 'blur' },
          { pattern: /^(\d{1}|[1-9]{1}[0-9]{1})$/, message: '排序序号必须是0~99', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = preBannerUrl+"/add-new";
          let formData =this.qs.stringify(this.ruleForm);

          let localJwt = localStorage.getItem('localJwt');
          this.axios.create({'headers': {'Authorization': localJwt}})
              .post(url, formData).then((response) => {
            let jsonResult = response.data;
            console.log(response);
            console.log(jsonResult);
            if(jsonResult.state == 20000){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.resetForm(formName);
            }else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 上传成功后的回调
    handleUploadSuccess(response){
      this.ruleForm.oldUrl =  this.ruleForm.url;
      this.ruleForm.url = response.data.url;
      console.log(this.ruleForm.oldUrl);
      this.handleDeletePicture();
    },
    //物理删除服务器保存头像
    handleDeletePicture(){
      if(this.ruleForm.oldUrl == ''){
        return;
      }
      let url = preResourceUrl + "/remove/image/banner";
      let formData = this.qs.stringify(this.ruleForm);

      let localJwt = localStorage.getItem('localJwt');
      this.axios.create({'headers': {'Authorization': localJwt}})
          .post(url, formData).then((response) => {
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          console.log("图片物理删除成功!");
        }else{
          console.log("图片物理删除失败!");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>

.picture-list .picture-item {
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #e8e6e6;
  border-radius: 6px;
  float: left;
  display: inline;
  position: relative;
}

.picture-list .picture-item .cover-flag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-left-radius: 6px;
}

.picture-list .picture-item .cover-flag .button {
  background: transparent;
  border: none;
  border-top-left-radius: 6px;
  font-size: 20px;
  padding: 8px;
}

.picture-list .picture-item .cover-flag .button:hover {
  background: #fcefef;
}

.picture-list .picture-item .cover-flag .cover {
  color: #f00;
}

.picture-list .picture-item .cover-flag .not-cover {
  color: #aaa;
}

.picture-list .picture-item .delete-button {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-right-radius: 6px;
}

.picture-list .picture-item .delete-button .button {
  border: none;
  border-bottom-right-radius: 6px;
}

.picture-list .picture-item .image {
  width: 230px;
  height: 230px;
  border-radius: 6px;
}

.picture-list .picture-uploader {
  float: left;
  width: 230px;
  height: 230px;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.picture-list .picture-uploader .picture-uploader-icon {
  width: 230px;
  height: 150px;
  font-size: 58px;
  color: #8c939d;
  line-height: 150px;
  text-align: center;
}

.picture-list .picture-uploader .picture-uploader-text {
  width: 230px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #8c939d;
}

.picture-list .picture-uploader .picture-uploader-text i {
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  color: #F56C6C;
}
</style>
